<!doctype html>

{% load staticfiles %}
<html>
  <head>
    <meta charset="utf-8" />
    <title>Cuckoo Sandbox</title>
    <link rel="shortcut icon" type="image/png" href=" {% static 'favicon-64x64.png' %}" sizes="64x64" />
    <link rel="shortcut icon" type="image/png" href=" {% static 'favicon-32x32.png' %}" sizes="32x32" />
    <link href="{% static "css/vendor.css"%}" rel="stylesheet" type="text/css" />
    <link href="{% static "css/main.css"%}" rel="stylesheet" type="text/css" />
  </head>
  <body class="no-padding" id="page-secret">
    <div class="flex-grid-full">
      <header class="effect effect-slide effect-slide-hold">
        <img src="{% static "graphic/cuckoo_inverse@2x.png" %}" />
      </header>
      <section>

        <div class="modal-cuckoo effect effect-slide effect-slide-hold" data-effect-delay="1">
          <form class="modal-dialog" method="POST">
            {% csrf_token %}
            <div class="modal-content">
              <div class="modal-header">
                <h4>Secret <i class="fal fa-fingerprint effect effect-fade effect-fade-hold" data-effect-delay="3"></i></h4>
              </div>
              <p class="modal-section arrow">This Cuckoo Sandbox instance has been locked with a secret. Please fill in the secret in the field below to enter the web interface.</p>
              <div class="modal-section modal-form no-flex arrow">
                <div class="form-col">
                  <fieldset>
                    <input type="password" name="secret" id="secret" required />
                    <label for="secret">
                      Secret
                      <span class="input-message">
                        {% if fail and fail != False %}
                          Secret incorrect. Please try again.
                        {% endif %}
                      </span>
                    </label>
                  </fieldset>
                </div>
                <nav class="form-col button-nav">
                  <div class="button-nav__left">
                    <a class="button variation-grey" href="action:toggle-info">What is this?</a>
                  </div>
                  <div class="button-nav__right">
                    <button type="submit" class="button variation-blue">Enter</button>
                  </div>
                </nav>
              </div>
              <div class="modal-section hidden" data-toggleable-col>
                <p>
                  You are seeing this dialog because this Web Interface has
                  been locked away safely with a secret. This functionality has
                  been turned on the by the owner of this instance and cannot be
                  accessed without this secret. If you're not the owner, please
                  contact the owner to obtain the key. This key ensures that this
                  system is not directly accessible for the world-wide web and can
                  be interpreted as a bold safety and/or privacy measure taken by
                  the owner of this instance.
                </p>
              </div>
            </div>
          </form>
        </div>

      </section>
    </div>
    <script src="{% static "js/vendor.js" %}"></script>
    <script src="{% static "js/cuckoo/secret.js" %}"></script>
  </body>
</html>
